<!doctype html>
<html ng-app="mod">
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<meta name="description" content="智能社是一家专注于web前端开发技术的公司，目前主要提供JavaScript培训和HTML5培训两项服务，同时还推出了大量javascript基础知识教程，智能课堂为你带来全新的学习方法和快乐的学习体验。" />
<title>智能社— http://www.zhinengshe.com</title>
<link rel="stylesheet" href="./Css/index.css" />
<script src="Js/jquery-3.2.0.min.js"></script>
<script src="Js/angular.js"></script>
<script>
    
    $(()=>{
        // 点击我要许愿 弹出这招层
        $("#send").click(()=>{
            $("#layer").show();
            $("#send-form").show();
            $("#send-form").css({
                left:50+"%",
                top:50+"%",
                "margin-left":-($("#send-form").width()/2)+"px",
                "margin-top":-($("#send-form").height()/2)+"px",
            });
        });
        function hid(){
            $("#layer").hide();
            $("#send-form").hide();
            $("#username").val("");
            $("#content").val(""); 
        }
        $("#close").click(hid);
        // 页面取出数据，传到后台
        $("#send-btn").click(hid);
        //50
        $("#content").on("input",function(){
            let len = $("#content").val().length
            if(50-len<0){
               $("#font-num").parent().html(`愿望：(您已经超出&nbsp;<span id='font-num'>50</span>&nbsp;个字)`)
               $("#font-num").html(Math.abs(50-len))
            }else{
                $("#font-num").parent().html(`愿望：(您还可以输入&nbsp;<span id='font-num'>50</span>&nbsp;个字)`)
                $("#font-num").html(Math.abs(50-len))
            }
        })
         //拖拽
        $('#main').on('mousedown','.paper',function(ev){
            let disX = ev.pageX-$(this).position().left;
            let disY = ev.pageY-$(this).position().top;
            let _this = this;
            function fnMove(ev){
                $(_this).css({
                    left:ev.pageX-disX+'px',
                    top:ev.pageY-disY+'px'
                });
            }
            function fnUp(){
                $(document).off('mousemove',fnMove);
                $(document).off('mouseup',fnUp);
            }
            $(document).on('mousemove',fnMove);
            $(document).on('mouseup',fnUp);
            return false;
        });
        // 表情
        $("#phiz").on("click","img",function(){
            let val = $(this).attr("alt")
            let str = "["+val+"]";
            $("#content").append(str);
            
        })

        
    })
     angular.module('mod',[])
        .controller("ctrl",($scope,$http)=>{
            $scope.result=[];
            // 添加数据
            render()
            function render(){
                $http.get(`wish.php?act=get`).then(res=>{
                    $scope.result=res.data.msg
                    let w = document.documentElement.clientWidth||document.body.clientWidth;
                    let h = document.documentElement.clientHeight||document.body.clientHeight;
                    for(let item in $scope.result){
                        let rnd1 = rnd(0,w-234);   // 234为一张留言条的宽度  
                        let rnd2 = rnd(0,h-167);   // 167为一张留言条的高度
                        $scope.result[item].r={rnd1,rnd2}
                    }
                },err=>{})
            }
            function rnd(n,m){
                return Math.floor(Math.random()*(m-n)+n);
            }
           
            $scope.sendBtn = ()=>{
                $http.get(`wish.php?act=add&username=${$scope.username}&content=${$scope.content}`).then(res=>{
                    if(res.error){
                        alert("添加失败！")
                    }else{
                        alert("添加成功！")
                        // $scope.result.push({"rnd1":rnd(0,809),"rnd2":rnd(0,501)})
                        render()
                    }
                },err=>{}) 
                console.log($scope.result)
            };
            // 删除一条数据
            $scope.closeBtn = (id)=>{
                if(confirm("确定要删除吗？")){
                    $http.get(`wish.php?act=delete&id=${id}`)
                    .then(res=>{
                        if(res.data.error){
                            alert("删除失败！")
                        }else{
                            alert("删除成功！")
                            render()
                        }
                    },err=>{}) 
                }
            }
        })
        ;
        // 拖拽不能上拖出$("#main")范围
        // 表情没有做
        // 发布时间又问题
        // 出现位置不固定
        // 
</script>
</head>
<body ng-controller="ctrl">
<div id='top'>
    <span id='send'></span>
</div>
<div id='main'>
    <dl class='paper a1' ng-repeat="item in result" style="left:{{item.r.rnd1}}px;top:{{item.r.rnd2}}px">
        <dt>
            <span class='username'>{{item.username}}</span>
            <span class='num'>No.0000{{item.id}}</span>
        </dt>
        <dd class='content'>{{item.content}}</dd>
        <dd class='bottom'>
            <span class='time'>{{item.time*1000|date:"yyyy-MM-dd hh:mm:ss"}}</span>
            <a href="" class='close' ng-click="closeBtn(item.id)"></a>
        </dd>
    </dl>
</div>

<div id="layer"></div>

<div id='send-form' style="z-index:2147483647;">
    <p class='title'><span>许下你的愿望</span><a href="javascript:;" id='close'></a></p>
    <form action="" name='wish'>
        <p>
            <label for="username">昵称：</label>
            <input type="text" name='username' id='username' ng-model='username'/>
        </p>
        <p>
            <label for="content">愿望：(您还可以输入&nbsp;<span id='font-num'>50</span>&nbsp;个字)</label>
            <textarea name="content" id='content' ng-model='content'></textarea>
            <div id='phiz'>
                <img src="./Images/phiz/zhuakuang.gif" alt="抓狂" />
                <img src="./Images/phiz/baobao.gif" alt="抱抱" />
                <img src="./Images/phiz/haixiu.gif" alt="害羞" />
                <img src="./Images/phiz/ku.gif" alt="酷" />
                <img src="./Images/phiz/xixi.gif" alt="嘻嘻" />
                <img src="./Images/phiz/taikaixin.gif" alt="太开心" />
                <img src="./Images/phiz/touxiao.gif" alt="偷笑" />
                <img src="./Images/phiz/qian.gif" alt="钱" />
                <img src="./Images/phiz/huaxin.gif" alt="花心" />
                <img src="./Images/phiz/jiyan.gif" alt="挤眼" />
            </div>
        </p>
        <span id='send-btn' ng-click="sendBtn()"></span>
    </form>
</div>
<!--[if IE 6]>
<script type="text/javascript" src="./Js/iepng.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('#send,#close,.close','background');
</script>
<![endif]-->
</body>
</html>